<template>
	<view style="overflow-x: hidden;">
		<!-- <view class="bg">
			<image class="bg-img" src="/static/vip/bg.png" mode=""></image>
		</view> -->
		
		
		
		<!-- <view class="info" :style="{marginTop: statusBarHeight + 14 + 'px'}">
			<image class="info-bg" src="/static/vip/info-bg.png" mode=""></image>
			
			<view class="info-content">
				<view class="info-avatar">
					<image class="info-avatar-pic" src="/static/vip/avatar.png" mode=""></image>
				</view>
				<view class="info-name">
					<text class="info-name">刘翠花</text>
					<text class="info-level">升级至尊会员享额外特权</text>
				</view>
			</view>
			
			<view class="info-asset">
				<view class="info-asset-item">
					<text class="iai-title">积分</text>
					<text class="iai-value">0</text>
				</view>
				<view class="info-asset-item">
					<text class="iai-title">金币</text>
					<text class="iai-value">2563</text>
				</view>
				<view class="info-asset-item">
					<text class="iai-title">优惠券</text>
					<text class="iai-value">3</text>
				</view>
			</view>
		</view> -->
		<!-- 图有白边   需要换-->
		<image src="http://shuati26.kptedu.com/uploads/image/vipimgbig.png" style="width:100%;height: 150rpx;"></image>
		<view class="vip-tishi">
			———激活{{cityName}}题库卡,您将专享以下专属权益———
		</view>
		<view class="main-title">
			<text>会员特权</text>
		</view>
		
		<view class="privilege">
			<view class="privilege-item" v-for="(item, index) in privilegeList" :key="index" hover-class="hover" @click="privilegeClick(index)">
				<image class="privilege-item-pic" :src="item.pic" mode=""></image>
				<text class="privilege-item-text">{{ item.text }}</text>
			</view>
		</view>
		
		
		
		
		<view class="main-title">
			<text>会员充值</text>
		</view>
		
		<scroll-view scroll-x>
			<view class="recharge">
				<view class="recharge-item" :class="current == index ? 'recharge-item-active': ''" v-for="(item, index) in rechargeOptions" :key="index" :style="{marginLeft: !index ? '30rpx': ''}" @click="rechargeChange(index)">
					<view class="recharge-tagf" v-if="item.showTag">
						<text class="recharge-tag-text" >限时特价 送豪礼</text>
					</view>
					<text class="recharge-item-duration">{{ item.duration }}</text>
					<view class="recharge-item-price">
						<text class="rmb">￥</text>
						<text class="recharge-item-price-text">{{ item.price }}</text>
					</view>
					<text class="recharge-item-des" v-for="(desItem, desIndex) in item.des" :key="desIndex">{{ desItem }}</text>
				</view>
			</view>
		</scroll-view>
		
		<view class="button update" hover-class="hover" @click="updateNow">
			<text class="button-text">立即升级</text>
		</view>
		
		
		
		
		
		<!-- <view class="level">
			<view class="level-rate">
				<text class="level-rate-text1">当前返利比例</text>
				<text class="level-rate-text2">25%</text>
			</view>
			
			<view class="level-info">
				<image class="level-info-icon" src="~@/static/vip/vip.png" mode=""></image>
				<text class="level-info-text">V1至尊会员</text>
				<text class="level-info-integral">0</text>
			</view>
			
			<view class="level-distance">
				<text class="level-distance-text">距V1会员还有1250点</text>
				<view class="button level-distance-button" hover-class="hover">
					<text class="button-text">查看详情</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	export default {
		data() {
			return {
				statusBarHeight,
				current: 0,
				rechargeOptions: [
					{
						duration: '12个月',
						price: 88,
						des: [
							'到期自动续费',
							'可随时关闭'
						],
						showTag: true
					},
					{
						duration: '1个月',
						price: 15,
						des: [
							'联合月卡'
						],
						showTag: false
					},
					{
						duration: '连续包月',
						price: 10,
						des: [
							'到期自动续费',
							'可随时关闭'
						],
						showTag: false
					},
					{
						duration: '连续包年',
						price: 70,
						des: [
							'到期自动续费',
							'可随时关闭'
						],
						showTag: true
					}
				],
				privilegeList: [
					{
						pic: '/static/vip/coin.png',
						text: '每日金币'
					},
					{
						pic: '/static/vip/quan.png',
						text: '大额神券'
					},
					{
						pic: '/static/vip/red-bag.png',
						text: '更多返利'
					},
					{
						pic: '/static/vip/goods.png',
						text: '精选商品'
					},
					{
						pic: '/static/vip/speed.png',
						text: '极速到账'
					},
					{
						pic: '/static/vip/share.png',
						text: '分享领券'
					},
					{
						pic: '/static/vip/active.png',
						text: '专享活动'
					},
					{
						pic: '/static/vip/birthday.png',
						text: '生日折扣'
					}
					// {
					// 	pic: '/static/vip/notic.png',
					// 	text: '上架提醒'
					// },
					// {
					// 	pic: '/static/vip/kefu.png',
					// 	text: '专属客服'
					// }
				],
				cityName:uni.getStorageSync('choose_cityName'),
			}
		},
		onShow() {
			this.get_vipInfo()
		},
		methods: {
			async get_vipInfo() {
					let res = await this.$myHttp.post({
						url: this.$myHttp.urlMap.vipInfo,
						data: {
							province:uni.getStorageSync('choose_cityName'),
						},
						needLogin: true,
					})
					
					if (res.code == 1) {
						this.list = res.data.data
					}
				
			},
			rechargeChange(index) {
				this.current = index
			},
			async updateNow() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.vipPay,
					data: {
						paytype:'wechat',
						level:1,
						days:30,
						method:'miniapp',
						province:uni.getStorageSync('choose_cityName'),
					},
					needLogin: true,
				})
				if (res.code == 1) {
						var payinfo = res .data
						wx.requestPayment({
							"timeStamp":payinfo.timeStamp,
							"nonceStr": payinfo.nonceStr,
							"package": payinfo.package,
							"signType": payinfo.signType,
							"paySign": payinfo.paySign,
							"success":function(res){
								
							},
							"fail":function(res){
								
							},
							"complete":function(res){
								
							}
						})
				}
				/* uni.showToast({
					icon: "none",
					title: `选择了「${this.rechargeOptions[this.current].duration}」`
				}) */
			},
			privilegeClick(index) {
				uni.showToast({
					icon: "none",
					title: `点击了「${this.privilegeList[index].text}」`
				})
			},
			back() {
				
				    let pages = getCurrentPages(); // 当前页面
				    let beforePage = pages[pages.length - 2]; // 前一个页面
				     uni.navigateBack({
				     delta: 1,
				     success: function() {
				      beforePage.$vm.initData(); // 执行前一个页面的刷新 （initData是我自己定义的方法）
				     }
				    });
				
				   
				uni.showToast({
					
					icon: "none",
					title: "返回"
				})
			}
		}
	}
</script>

<style lang="scss">
	.recharge-tagf{
		position: absolute;
		top: -2rpx;
		left: -2rpx;
		background-image: url('../../../static/vip/tag.png');
		background-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 37rpx;
		
		
	}
	
	
	
	.main-title {
		padding: 30rpx 30rpx;
		font-size: 34rpx;
		color: #1C1C1C;
	}
	
	.tip {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #A5A3A2;
	}
	
	.rmb {
		font-size: 26rpx;
		color: #E3BE83;
	}
	
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 400rpx;
		z-index: -2;
		
		&-img {
			width: 100%;
			height: 100%;
		}
	}
	
	.hover {
		opacity: 0.7;
	}
	
	.nav {
		position: fixed;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 44px;
		padding: 0 30rpx;
		background-image: url('~@/static/vip/nav-bg.png');
		background-size: 100%;
		z-index: 99;
		
		&-back {
			width: 20rpx;
			height: 40rpx;
		}
		
		&-title {
			color: #FFFFFF;
			font-size: 42rpx;
		}
		
		&-space {
			width: 70rpx;
			height: 40rpx;
		}
	}
	
	.info {
		position: relative;
		padding: 0 15rpx;
		width: 730rpx;
		height: 360rpx;
		
		&-bg {
			position: absolute;
			width: 730rpx;
			height: 360rpx;
			z-index: -1;
		}
		
		&-content {
			padding: 70rpx 50rpx 0 50rpx;
			margin-bottom: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		
		&-avatar {
			margin-right: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 85rpx;
			height: 85rpx;
			background-color: #fff;
			padding: 1rpx;
			border-radius: 50%;
			
			&-pic {
				width: 83rpx;
				height: 83rpx;
			}
		}
		
		&-name {
			display: flex;
			flex-direction: column;
			color: #FFFFFF;
			font-size: 35rpx;
		}
		
		&-level {
			margin-top: 15rpx;
			font-size: 24rpx;
		}
		
		&-asset {
			padding: 0 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			&-item {
				display: flex;
				flex-direction: column;
			}
		}
	}
	
	.iai {
		&-title {
			margin-bottom: 20rpx;
			margin-right: 100rpx;
			font-size: 24rpx;
			color: #CFB386;
		}
		
		&-value {
			font-size: 35rpx;
			color: #FFFFFF;
		}
	}
	
	.recharge {
		position: relative;
		margin-bottom: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		
		&-tag {
			position: absolute;
			top: -2rpx;
			left: -2rpx;
			width: 170rpx;
			height: 36rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background-image: url('~@/static/vip/tag.png');
			background-size: 100%;
			
			&-text {
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
		
		&-item {
			position: relative;
			padding: 40rpx 0;
			margin-left: 15rpx;
			width: 200rpx;
			height: 230rpx;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			border: solid 2rpx #F2F2F3;
			border-radius: 12rpx;
			
			&-active {
				border-color: #EDD2A9;
				background-color: #FBF1E5;
			}
			
			&-duration {
				margin-bottom: 30rpx;
				font-size: 26rpx;
				color: #1C1C1C;
			}
			
			&-price {
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: baseline;
				
				&-text {
					font-size: 48rpx;
					color: #E3BE83;
				}
			}
			
			&-des {
				font-size: 22rpx;
				color: #A5A3A2;
			}
		}
	}
	
	.button {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 85rpx;
		border-radius: 50rpx;
		background-image: linear-gradient(#EFCF9E, #E4BF85);
		
		&-text {
			font-size: 30rpx;
			color: #1C1C1C;
		}
	}
	
	.update {
		margin: 35rpx 30rpx 20rpx 30rpx;
	}
	
	.privilege {
		padding: 0 30rpx;
		
		display: flex;
		flex-direction: row;
		align-items: center;
		//justify-content: space-around;
		flex-wrap: wrap;
		
		&-item {
			
			margin-bottom: 50rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;
			&-pic {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}
			
			&-text {
				font-size: 24rpx;
				color: #383738;
			}
		}
	}
	
	.level {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 466rpx;
		background-image: url('~@/static/vip/vip-bg.png');
		background-size: 100%;
		
		&-rate {
			position: absolute;
			top: 43rpx;
			left: 33rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			&-text1 {
				margin-right: 20rpx;
				color: #1C1C1C;
				font-size: 34rpx;
			}
			
			&-text2 {
				font-size: 34rpx;
				color: #C07C07;
			}
		}
		
		&-info {
			// position: absolute;
			// top: 188rpx;
			// left: 350rpx;
			margin-top: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			&-icon {
				margin-bottom: 20rpx;
				width: 48rpx;
				height: 38rpx;
			}
			
			&-text {
				margin-bottom: 20rpx;
				font-size: 26rpx;
				color: #292929;
			}
			
			&-integral {
				font-size: 40rpx;
				color: #C07C07;
			}
		}
		
		&-distance {
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 35rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			
			&-text {
				font-size: 26rpx;
				color: #292929;
			}
			
			&-button {
				padding: 0 30rpx;
				height: 60rpx;
			}
		}
	}
	.vip-tishi{
		font-size: 25rpx;
		color: #9c9c9c;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top:50rpx;
		margin-bottom:20rpx;
	}
</style>
